<template>
  <div>
    <!-- 导航  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>素材管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card" style="height: 800px">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName">
        <el-tabs v-model="activeName" @tab-click="paneEdit">
          <el-tab-pane
            :label="item.label"
            :name="item.value"
            v-for="(item, index) in activeValue"
            :key="index"
          >
            <el-row>
              <el-col :span="20">
                <!-- 按钮 -->
                <el-form :inline="true" :model="queryData" class="user-search">
                  <el-form-item>
                    <el-input
                      prefix-icon="el-icon-search"
                      v-model="queryData.materialTitle"
                      placeholder="请输入素材标题"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="queryList"
                      >查询</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="2">
                <el-button
                  icon="el-icon-plus"
                  type="primary"
                  @click="handleEdit"
                  >新建素材</el-button
                >
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tabs>
      <!--列表-->
      <el-row>
        <el-col :span="5">
          <el-card class="box-card" style="width: 250px; height: 630px">
            <el-link @click="show">+ 添加分组</el-link>
            <el-tree
              :data="data"
              :props="defaultProps"
              accordion
              @node-click="handleNodeClick"
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
                @mouseover="data.show = true"
                @mouseleave="data.show = false"
              >
                <span>{{ node.label }}</span>
                <span>
                  <el-button
                    v-if="data.show"
                    type="text"
                    size="mini"
                    @click="() => removeGroup(node, data)"
                  >
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-card>
        </el-col>

        <el-col :span="19">
          <el-card class="box-card" style="height: 630px">
            <div v-show="showData">
              <el-table
                size="small"
                :data="listData"
                highlight-current-row
                v-loading="loading"
                element-loading-text="拼命加载中"
                style="width: 100%"
              >
                <el-table-column align="center" type="selection" width="">
                </el-table-column>
                <el-table-column
                  prop="materialTitle"
                  label="素材标题"
                  width="200"
                >
                </el-table-column>
                <el-table-column label="类型" width="">
                  <template slot-scope="scope">
                    <span v-if="scope.row.materialType == 1">图文</span>
                    <span v-if="scope.row.materialType == 2">PDF</span>
                    <span v-if="scope.row.materialType == 3">图片</span>
                  </template>
                </el-table-column>
                <el-table-column prop="materialViews" label="浏览量" width="">
                </el-table-column>
                <el-table-column prop="materialFounder" label="创建人" width="">
                </el-table-column>
                <el-table-column
                  prop="materialCreateTime"
                  label="创建时间"
                  width=""
                >
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="xiangqing(scope.$index, scope.row)"
                    >
                      详情
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="bianji(scope.$index, scope.row)"
                      >编辑
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="shanchu(scope.$index, scope.row)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页组件 -->
              <el-pagination
                @size-change="
                  queryDataHandle(pagePagination.currentPage, $event)
                "
                @current-change="
                  queryDataHandle($event, pagePagination.pageSize)
                "
                :current-page="pagePagination.currentPage"
                :page-sizes="pagePagination.pageSizes"
                :page-size="pagePagination.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="pagePagination.total"
              >
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 添加分组 -->
      <el-dialog
        :title="title"
        :visible.sync="formVisible"
        width="30%"
        @click="close"
        :close-on-click-modal="false"
      >
        <!--<div style="background: rgb(230,247,255); border: 1px solid rgb(165,221,255); padding: 8px; color: #999; margin-bottom: 15px;">
                    企业素材下的素材，默认全部员工可见，如果需要设置部分员工可见请至团队话术下设置
                </div>-->

        <el-row>
          <el-col :span="4"> 分组名称： </el-col>
          <el-col :span="20">
            <el-input
              size="small"
              v-model="addGroup"
              placeholder="请输入分组名称"
            ></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"> 可见范围： </el-col>
          <el-col :span="20"
            ><!--v-if="showIndex === '1'"-->
            全部员工
          </el-col>
          <!--<div v-if="showIndex !== '1'">
                        <el-col :span="20">
                            部分可见
                        </el-col>
                        <el-col :span="20" style="color: hsla(0,0%,80%,.8);">
                            所选部门仅指定该部门直属员工可用，子部门不可用，需要单独添加
                        </el-col>
                        <el-col :span="20">
                            <el-button size="small" icon="el-icon-plus" type="primary">添加部门
                            </el-button>
                        </el-col>
                    </div>-->
        </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="close">取消</el-button>
          <el-button size="mini" type="primary" @click="fzsubmit"
            >确定</el-button
          >
        </div>
      </el-dialog>
      <!-- 新建素材 -->
      <el-dialog
        title="新建素材"
        :visible.sync="wordsFormVisible"
        width="30%"
        @click="wordsClose()"
        :close-on-click-modal="false"
      >
        <div
          style="
            background: rgb(230, 247, 255);
            border: 1px solid rgb(165, 221, 255);
            padding: 8px;
            color: #999;
            margin-bottom: 15px;
          "
        >
          填写链接后将自动转换成内部网页链接，员工发送给客户后可记录客户打开的数据，及时提醒员工跟进
        </div>
        <el-form
          ref="form"
          :model="monomerData"
          label-width="80px"
          class="create_material_form"
        >
          <el-form-item label="分组">
            <el-select
              v-model="monomerData.materialGroupId"
              placeholder="请选择分组"
            >
              <el-option
                v-for="item in data"
                :key="item.materialGroupId"
                :label="item.materialGroupName"
                :value="item.materialGroupId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="素材标题">
            <el-input v-model="monomerData.materialTitle"></el-input>
          </el-form-item>

          <el-form-item label="文件类型">
            <el-radio-group v-model="monomerData.materialType">
              <el-radio label="1">图文链接</el-radio>
              <el-radio label="2">PDF</el-radio>
              <el-radio label="3">图片</el-radio>
            </el-radio-group>
            <div v-if="monomerData.materialType === '2'">
              <el-upload
                class="upload-demo"
                ref="uploadAddPdf"
                :action="'http://localhost:8088/common/upload'"
                :on-success="successPdf"
                :on-change="handleAvatarChange"
                accept="application/pdf"
                :show-file-list="false"
                :limit="1"
                :auto-upload="true"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div style="color: #999">文件名将被用做搜索，建议规范名称</div>
              <div class="pdf-file">
                <img :src="require('@/assets/img/Pdf.png')" class="avatar" />
                <div style="margin-left: 20px">
                  {{ monomerData.materialLinkTitle }}
                </div>
              </div>
            </div>
          </el-form-item>

          <div v-if="monomerData.materialType === '1'">
            <el-form-item>
              <el-input
                placeholder="填写链接地址"
                v-model="monomerData.materialAppendices"
              >
                <el-button
                  slot="append"
                  icon="el-icon-folder-opened"
                  @click="chooseArticle"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="链接标题" required>
              <el-input
                placeholder="填写链接标题"
                v-model="monomerData.materialLinkTitle"
                maxlength="20"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="链接摘要" required>
              <el-input
                placeholder="填写链接摘要"
                v-model="monomerData.materialLinkToThe"
                maxlength="50"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="链接封面" required>
              <el-upload
                class="avatar-uploader"
                ref="uploadAddImg"
                :action="'http://localhost:8088/common/upload'"
                :show-file-list="false"
                accept="image/jpeg,image/png"
                :on-success="handleAvatarSuccess"
                :on-change="handleAvatarChangeImg"
                :auto-upload="true"
              >
                <img
                  v-if="monomerData.materialLinksCoverImg"
                  :src="imgFormate(monomerData.materialLinksCoverImg)"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="显示效果">
              <div
                style="
                  width: 244px;
                  height: 80px;
                  border: 0;
                  background: #f1f5f7;
                  border-radius: 4px;
                "
              >
                <el-col :span="8">
                  <div class="demo-image__placeholder">
                    <div class="block">
                      <el-image
                        v-if="monomerData.materialLinksCoverImg"
                        :src="imgFormate(monomerData.materialLinksCoverImg)"
                        class="effect"
                      ></el-image>
                      <el-image v-else>
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline"></i>
                        </div>
                      </el-image>
                    </div>
                  </div>
                </el-col>
                <el-col :span="15">
                  <div style="height: 60px; width: calc(100% - 10px)">
                    <p class="materialP1" v-if="monomerData.materialLinkTitle">
                      {{ monomerData.materialLinkTitle }}
                    </p>
                    <p class="materialP1" v-else>--</p>

                    <p class="materialP2" v-if="monomerData.materialLinkToThe">
                      {{ monomerData.materialLinkToThe }}
                    </p>
                    <p class="materialP2" v-else>--</p>
                  </div>
                </el-col>
              </div>
            </el-form-item>
          </div>
          <div v-if="monomerData.materialType === '3'">
            <el-form-item label="选择图片" required>
              <el-upload
                class="avatar-uploader"
                ref="uploadAddImg3"
                :action="'http://localhost:8088/common/upload'"
                :show-file-list="false"
                accept="image/jpeg,image/png"
                :on-success="handleAvatarSuccess3"
                :on-change="handleAvatarChangeImg3"
                :auto-upload="true"
              >
                <img
                  v-if="monomerData.materialLinksCoverImg"
                  :src="imgFormate(monomerData.materialLinksCoverImg)"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div>
          <h6>连接追踪设置</h6>
          <el-checkbox-group v-model="monomerData.materialTrackTypeString">
            <el-checkbox label="1"
              >行为追踪(当客户点击素材链接时,发送素材链接的员工将会收到通知)</el-checkbox
            >
            <el-checkbox label="2"
              >动态记录(当客户点击素材链接时，会将客户的行为记录在客户动态里)</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="close">取消</el-button>
          <el-button size="mini" type="primary" @click="submit()"
            >确定</el-button
          >
        </div>
      </el-dialog>
      <!--编辑素材-->
      <el-dialog
        title="编辑素材"
        :visible.sync="edit"
        width="30%"
        :close-on-click-modal="false"
      >
        <div
          style="
            background: rgb(230, 247, 255);
            border: 1px solid rgb(165, 221, 255);
            padding: 8px;
            color: #999;
            margin-bottom: 15px;
          "
        >
          填写链接后将自动转换成内部网页链接，员工发送给客户后可记录客户打开的数据，及时提醒员工跟进
        </div>
        <el-form
          ref="form"
          :model="updateData"
          label-width="80px"
          class="create_material_form"
        >
          <el-form-item label="分组">
            <el-select
              v-model="updateData.materialGroupId"
              placeholder="请选择分组"
            >
              <el-option
                v-for="item in data"
                :key="item.materialGroupId"
                :label="item.materialGroupName"
                :value="item.materialGroupId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="素材标题">
            <el-input v-model="updateData.materialTitle"></el-input>
          </el-form-item>

          <el-form-item label="文件类型">
            <el-radio-group v-model="updateData.materialType">
              <el-radio label="1">图文链接</el-radio>
              <el-radio label="2">PDF</el-radio>
              <el-radio label="3">图片</el-radio>
            </el-radio-group>
            <div v-if="updateData.materialType === '2'">
              <el-upload
                class="upload-demo"
                ref="uploadAddPdf2"
                :action="'http://localhost:8088/common/upload'"
                :on-success="successPdf2"
                :on-change="handleAvatarChange2"
                accept="application/pdf"
                :show-file-list="false"
                :limit="1"
                :auto-upload="true"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div style="color: #999">文件名将被用做搜索，建议规范名称</div>
              <div class="pdf-file">
                <img :src="require('@/assets/img/Pdf.png')" class="avatar" />
                <div style="margin-left: 20px">
                  {{ updateData.materialLinkTitle }}
                </div>
              </div>
            </div>
          </el-form-item>
          <div v-if="updateData.materialType === '1'">
            <el-form-item>
              <el-input
                placeholder="填写链接地址"
                v-model="updateData.materialAppendices"
              >
                <el-button
                  slot="append"
                  icon="el-icon-folder-opened"
                  @click="chooseArticle"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="链接标题" required>
              <el-input
                placeholder="填写链接标题"
                v-model="updateData.materialLinkTitle"
              ></el-input>
            </el-form-item>
            <el-form-item label="链接摘要" required>
              <el-input
                placeholder="填写链接摘要"
                v-model="updateData.materialLinkToThe"
              ></el-input>
            </el-form-item>
            <el-form-item label="链接封面" required>
              <el-upload
                class="avatar-uploader"
                ref="uploadAddImg2"
                action="http://localhost:8088/common/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :on-change="handleAvatarChangeImg2"
                accept="image/jpeg,image/png"
                :auto-upload="true"
              >
                <img
                  v-if="updateData.materialLinksCoverImg"
                  :src="imgFormate(updateData.materialLinksCoverImg)"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="显示效果">
              <div
                style="
                  width: 244px;
                  height: 80px;
                  border: 0;
                  background: #f1f5f7;
                  border-radius: 4px;
                "
              >
                <el-col :span="8">
                  <div class="demo-image__placeholder">
                    <div class="block">
                      <el-image
                        v-if="updateData.materialLinksCoverImg"
                        :src="imgFormate(updateData.materialLinksCoverImg)"
                        class="effect"
                      ></el-image>
                      <el-image v-else>
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline"></i>
                        </div>
                      </el-image>
                    </div>
                  </div>
                </el-col>
                <el-col :span="15">
                  <div style="height: 60px; width: calc(100% - 10px)">
                    <p class="materialP1" v-if="updateData.materialLinkTitle">
                      {{ updateData.materialLinkTitle }}
                    </p>
                    <p class="materialP1" v-else>--</p>

                    <p class="materialP2" v-if="updateData.materialLinkToThe">
                      {{ updateData.materialLinkToThe }}
                    </p>
                    <p class="materialP2" v-else>--</p>
                  </div>
                </el-col>
              </div>
            </el-form-item>
          </div>
          <div v-if="updateData.materialType === '3'">
            <el-form-item label="选择图片" required>
              <el-upload
                class="avatar-uploader"
                ref="uploadAddImg4"
                :action="'http://localhost:8088/common/upload'"
                :show-file-list="false"
                accept="image/jpeg,image/png"
                :on-success="handleAvatarSuccess4"
                :on-change="handleAvatarChangeImg4"
                :auto-upload="true"
              >
                <img
                  v-if="updateData.materialLinksCoverImg"
                  :src="imgFormate(updateData.materialLinksCoverImg)"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div>
          <h6>连接追踪设置</h6>
          <el-checkbox-group v-model="updateData.materialTrackTypeString">
            <el-checkbox label="1"
              ><p style="font-size: 10px">
                行为追踪(当客户点击素材链接时,发送素材链接的员工将会收到通知)
              </p></el-checkbox
            >
            <el-checkbox label="2"
              ><p style="font-size: 10px">
                动态记录(当客户点击素材链接时，会将客户的行为记录在客户动态里)
              </p></el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="close">取消</el-button>
          <el-button size="mini" type="primary" @click="save">确定</el-button>
        </div>
      </el-dialog>
      <!--详情-->
      <el-dialog
        title="详情"
        :visible.sync="view"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form ref="form" :model="viewData" label-width="100px" disabled>
          <el-form-item label="素材标题">
            <el-input v-model="viewData.materialTitle"></el-input>
          </el-form-item>
          <el-form-item label="素材类型">
            <template slot-scope="scope">
              <el-radio-group v-model="viewData.materialType">
                <el-radio label="1">图文链接</el-radio>
                <el-radio label="2">PDF</el-radio>
                <el-radio label="3">图片</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
          <el-form-item label="图片">
            <el-image
              v-if="viewData.materialType == 1 || viewData.materialType == 3"
              style="width: 100px; height: 100px"
              :src="imgFormate(viewData.materialLinksCoverImg)"
              fit="fill"
              :preview-src-list="materialTrackTypeMax"
            ></el-image>
            <el-image
              v-if="viewData.materialType == 2"
              style="width: 100px; height: 100px"
              :src="require('@/assets/img/Pdf.png')"
              fit="fill"
              @click="materialAppendice"
            ></el-image>
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="viewData.materialFounder"></el-input>
          </el-form-item>
          <el-form-item label="浏览量">
            <el-input v-model="viewData.materialViews"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="viewData.materialCreateTime"></el-input>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-input v-model="viewData.materialStatus"></el-input>
          </el-form-item>
        </el-form>
        <!--<el-button size="small" @click="closeDetails">返回</el-button>-->
      </el-dialog>
    </el-card>
    <el-dialog
      title="文章列表"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <span slot="footer" class="dialog-footer">
        <el-table :data="articleData" style="width: 100%">
          <el-table-column
            prop="articlesTitle"
            label="标题"
            width="300"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="articlesDescription"
            label="简介"
            width="400"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="selectArticle(scope.row)"
                type="text"
                size="small"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          @size-change="queryArticle(articlePagePagination.currentPage, $event)"
          @current-change="queryArticle($event, articlePagePagination.pageSize)"
          :current-page="articlePagePagination.currentPage"
          :page-sizes="articlePagePagination.pageSizes"
          :page-size="articlePagePagination.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="articlePagePagination.total"
        >
        </el-pagination>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const initMonomerData = {
  materialGroupId: "",
  materialTitle: "",
  materialType: "1",
  materialAppendices: "",
  materialStatus: "",
  materialLinkTitle: "",
  materialLinkToThe: "",
  materialLinksCover: "",
  materialLinksCoverImg: "",
  materialTrackType: "",
  materialTrackTypeString: [],
  materialShareLinks: "",
  materialShareCode: "",
  materialFounder: "",
  materialViews: "",
  materialCreateTime: "",
};
export default {
  data() {
    return {
      isDelete: false,
      showData: false,
      centerDialogVisible: false,
      articleData: [], //文章数据
      // ========选项卡=======
      activeName: "1",
      showIndex: "1",
      activeValue: [
        { label: "企业素材", value: "1" },
        { label: "团队素材", value: "2" },
      ],
      // ========选项卡=======
      // 列表数据
      listData: [],
      fileList: [],
      //修改数据
      updateData: {},
      //详情数据
      viewData: {},
      // 新增数据
      monomerData: {
        materialGroupId: "",
        materialTitle: "",
        materialType: "1",
        materialAppendices: "",
        materialStatus: "",
        materialLinkTitle: "",
        materialLinkToThe: "",
        materialLinksCover: "",
        materialLinksCoverImg: "",
        materialTrackType: "",
        materialTrackTypeString: [],
        materialShareLinks: "",
        materialShareCode: "",
        materialFounder: "",
        materialViews: "",
        materialCreateTime: "",
      },
      // 查询数据
      queryData: {
        materialTitle: "",
      },
      // 分页参数
      pagePagination: {
        currentPage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0,
      },
      // 分页参数
      articlePagePagination: {
        currentPage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0,
      },
      view: false,
      edit: false,

      title: "新建分组",

      // 添加分组的数据
      addGroup: "",

      // 添加分组显示
      formVisible: false,
      // 新建素材显示
      wordsFormVisible: false,

      // 连接追踪选项
      checked: "",

      // 筛选
      formInline: {
        page: 1,
        limit: 10,
        varLable: "",
        varName: "",
        // token: localStorage.getItem('logintoken')
      },

      data: [],
      defaultProps: {
        label: "materialGroupName",
      },
      // 显示加载
      loading: false,
      //选中的分组
      grouping: "",
    };
  },
  mounted() {
    this.getGroup();
  },
  methods: {
    imgFormate(img) {
      return "http://localhost:8088/common/download/" + img;
    },
    removeGroup(node, data) {
      let that = this;
      that.isDelete = true;
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let materialGroupId = data.materialGroupId;
          var params = {
            materialGroupId: materialGroupId,
            pageNum: this.pagePagination.currentPage,
            pageSize: this.pagePagination.pageSize,
            materialTitle:''
          };
          this.$request("/material/getByTitle", params, "POST").then(
            (data) => {
              if (data.data.data != null && data.data.data.length !== 0) {
                that.$message.error("请先将该分组中数据清空后再删除！");
              } else {
                that
                  .$request(
                    "/materialGroup/delete/" + materialGroupId,
                    "",
                    "POST"
                  )
                  .then((data) => {
                    that.$message.success("删除成功！");
                    that.showData = false;
                    that.getGroup();
                  });
              }
            }
          );
        })
        .catch(() => {});
    },
    chooseArticle() {
      this.centerDialogVisible = true;
      this.queryArticle(1, 10);
    },
    queryArticle(page = 1, row = 10) {
      let that = this;
      let payload = {
        articlesTitle: "",
        pageNum: page,
        pageSize: row,
      };
      that.$request("/article/getAll", payload, "POST").then((data) => {
        that.articleData = data.data.data;
        that.articlePagePagination["total"] = data.data.total;
        that.articlePagePagination["pageSize"] = row;
      });
    },
    //选择数据
    selectArticle(row) {
      this.centerDialogVisible = false;
      this.monomerData.materialAppendices = row.articlesUrl;
      this.updateData.materialAppendices = row.articlesUrl;
    },
    //条件查询
    queryList() {
      var params = {
        materialTitle: this.queryData.materialTitle,
        materialGroupId: this.grouping,
        pageNum: this.pagePagination.currentPage,
        pageSize: this.pagePagination.pageSize,
      };
      this.$request("/material/getByTitle", params, "POST").then(
        (data) => {
          this.listData = data.data.data;
          this.pagePagination.total = data.data.total;
        }
      );
    },
    //获取分组
    getGroup() {
      let that = this;
      this.$request("/materialGroup/selectAll", {}, "GET").then((data) => {
        that.data = [];
        that.listData = [];
        for (let item of data.data) {
          //判断素材类型，企业素材==1 可查看全部
          if (
            item.materialGroupRank === that.showIndex ||
            that.showIndex === "1"
          ) {
            item["show"] = false;
            that.data.push(item);
          }
        }
      });
    },
    handleNodeClick(data) {
      if (this.isDelete) {
        return (this.isDelete = false);
      }
      this.showData = true;
      this.grouping = data.materialGroupId;
      var params = {
        materialTitle: this.queryData.materialTitle,
        materialGroupId: this.grouping,
        pageNum: this.pagePagination.currentPage,
        pageSize: this.pagePagination.pageSize,
      };
      this.$request("/material/getByTitle", params, "POST").then((data) => {
        this.listData = data.data.data;
        this.pagePagination.total = data.data.total;
      });
    },
    // queryDataHandle(page = 1, row = 10) {
    //     let that = this;
    //     let payload = {
    //         materialTitle: this.queryData.materialTitle,
    //         materialGroupId: this.grouping,
    //         pageNum: page,
    //         pageSize: row
    //     }
    //     that.$request("/api/material/getByTitle/1_0", payload, "POST").then((data) => {
    //         this.listData = data.rows
    //         that.pagePagination['total'] = data.total
    //         that.pagePagination['pageSize'] = row
    //     })
    // },
    paneEdit(tab, event) {
      this.showData = false;
      this.showIndex = tab.name;
      this.getGroup();
    },
    fzsubmit() {
      if (
        this.addGroup == null ||
        this.addGroup == undefined ||
        this.addGroup == ""
      ) {
        this.$message({
          message: "请输入名称",
          type: "error",
        });
        return;
      }
      this.$request(
        "/materialGroup/add",
        {
          materialGroupName: this.addGroup,
          materialGroupRank: this.showIndex,
        },
        "POST"
      ).then((data) => {
        this.$message({
          message: "分组添加成功",
          type: "success",
        });
        this.getGroup();
      });
      this.close();
    },
    xiangqing(index, row) {
        this.$request("/material/getById/"+row.materialId, "GET").then((data) => {
            this.viewData = data.data;
    })
      
      this.view = true;
    },
    bianji(index, row) {
      this.$request("/material/getById/"+row.materialId, "GET").then((data) => {
        row["materialTrackTypeString"] = data.data.materialTrackType.split(",");
        data.data.materialTrackTypeString = row.materialTrackTypeString
        this.updateData = data.data;

    })
      this.edit = true;
    },
    save() {
      if (
        this.updateData.materialGroupId == null ||
        this.updateData.materialGroupId == ""
      ) {
        this.$message.error('请选择"分组"！');
        return;
      }
      if (
        this.updateData.materialTitle == null ||
        this.updateData.materialTitle == ""
      ) {
        this.$message.error('请填写"素材标题"！');
        return;
      }
        this.saveUpdate();
    },
    saveUpdate() {
      this.updateData.materialTrackType = this.updateData.materialTrackTypeString.toString();
      var updateData = this.updateData;
      this.$request("/material/update", updateData, "POST").then((data) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.handleNodeClick(updateData);
      });
      this.close();
    },
    shanchu(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$request(
            "/material/delete/" + row.materialId,
            "",
            "DELETE"
          ).then((data) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.handleNodeClick(row);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 添加分组显示
    show() {
      this.addGroup = "";
      this.formVisible = true;
    },
    closeDetails() {
      this.close();
    },
    // 添加分组关闭
    close() {
      this.formVisible = false;
      this.wordsFormVisible = false;
      this.edit = false;
      this.view = false;
    },

    // 新建素材显示
    handleEdit() {
      this.monomerData = { ...initMonomerData };
      this.wordsFormVisible = true;
    },
    // 新建素材显示
    wordsClose() {
      this.wordsFormVisible = false;
    },
    handleAvatarSuccess2(res, file) {
      this.updateData.materialLinksCover = res.data;
      // this.monomerData.materialAppendices = res.data;
      this.monomerData.materialLinksCoverImg = res.data;
      this.updateData.materialLinksCoverImg = res.data;
    },
    handleAvatarSuccess4(res, file) {
      // this.updateData.materialAppendices = res.data;
      this.updateData.materialLinksCover = res.data;
      this.updateData.materialLinksCoverImg = res.data;
      this.monomerData.materialLinksCoverImg = res.data;
    },
    handleAvatarChangeImg2(file) {
      if (this.beforeAvatarUpload(file.raw)) {
        this.updateData.type = 2;
        return;
      }
      this.$refs.uploadAddImg2.clearFiles();
    },
    handleAvatarChangeImg4(file) {
      if (this.beforeAvatarUpload(file.raw)) {
        this.updateData.type = 3;
        return;
      }
      this.$refs.uploadAddImg3.clearFiles();
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片格式不正确!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isPNG || (isJPG && isLt2M);
    },
    handleAvatarChangeImg(file) {
      if (this.beforeAvatarUpload(file.raw)) {
        this.monomerData.type = 2;
        return;
      }
      this.$refs.uploadAddImg.clearFiles();
    },
    handleAvatarChangeImg3(file) {
      if (this.beforeAvatarUpload(file.raw)) {
        this.monomerData.type = 3;
        return;
      }
      this.$refs.uploadAddImg3.clearFiles();
    },
    handleAvatarSuccess(res, file) {
      this.monomerData.materialLinksCoverImg = res.data;
      this.monomerData.materialLinksCover = res.data;
      this.updateData.materialLinksCoverImg = res.data;
      // this.monomerData.materialAppendices = res.data;
      // this.materialAdd();
    },
    handleAvatarSuccess3(res, file) {
      this.monomerData.materialLinksCoverImg = res.data;
      // this.monomerData.materialAppendices = res.data;
      this.monomerData.materialLinksCover = res.data;
      // this.materialAdd();
      this.updateData.materialLinksCoverImg = res.data;
    },
    submit() {
      if (
        this.monomerData.materialGroupId == null ||
        this.monomerData.materialGroupId == ""
      ) {
        this.$message.error('请选择"分组"！');
        return;
      }
      if (
        this.monomerData.materialTitle == null ||
        this.monomerData.materialTitle == ""
      ) {
        this.$message.error('请填写"素材标题"！');
        return;
      }
      // if (this.monomerData.type === 1) {
      //     // this.$refs.uploadAddPdf.submit();
      // } else if (this.monomerData.type === 2) {
      //     // this.$refs.uploadAddImg.submit();
      // } else if (this.monomerData.type === 3) {
      //     // this.$refs.uploadAddImg3.submit();
      // } else {
      this.materialAdd();
      //     console.log("sub")
      // }
    },
    materialAdd() {
      // this.monomerData.materialFounder = this.$store.getters.getUserInfo.userId
      this.monomerData.materialTrackType = this.monomerData.materialTrackTypeString.toString();
      this.monomerData.groupId = this.monomerData.materialGroupId;
      var monomerData = this.monomerData;
      this.$request("/material/add", monomerData, "POST").then((data) => {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.handleNodeClick(monomerData);
      });
      this.close();
    },
    //pdf上传成功时
    successPdf(res, file, fileList) {
      this.monomerData.materialAppendices = res.data;
      this.monomerData.materialLinksCover =
        "https://ascrm.zzxapps.com/api/linux/material/pdf.png";
    },
    //新增时选择pdf文件后
    handleAvatarChange(file, fileList) {
      if (this.beforeAvatarUploadPDF(file.raw)) {
        this.monomerData.materialLinkTitle = file.name;
        this.monomerData.type = 1;
        return;
      }
      this.$refs.uploadAddPdf2.clearFiles();
    },
    //编辑时选择pdf文件后
    handleAvatarChange2(file, fileList) {
      if (this.beforeAvatarUploadPDF(file.raw)) {
        this.updateData.materialLinkTitle = file.name;
        this.updateData.type = 1;
        return;
      }
      this.$refs.uploadAddPdf.clearFiles();
    },
    //pdf上传前
    beforeAvatarUploadPDF(file) {
      const isJPG = file.type === "application/pdf";
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error("上传文件只能是 pdf 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    //pdf删除文件
    handleRemove2(file, fileList) {
      this.$request(
        "/api/file/deleteFile",
        {
          type: "2",
          name: this.updateData.materialAppendices,
        },
        "POST"
      ).then((data) => {
        this.$request(
          "/api/material/update/1_0",
          {
            materialId: this.updateData.materialId,
            materialLinkTitle: "",
          },
          "POST"
        ).then((data) => {
          if (data.status === 200) {
            this.$message({
              message: data.message,
              type: "success",
            });
            this.fileList = [];
          } else {
            return false;
          }
        });
      });
    },
    //pdf上传成功时
    successPdf2(res, file, fileList) {
      this.updateData.materialAppendices = res.data;
      this.monomerData.materialLinksCover =
        "https://ascrm.zzxapps.com/api/linux/material/pdf.png";
      this.saveUpdate();
    },
    materialAppendice() {
      window.open(this.$uri + this.viewData.materialAppendices);
    },
  },
  computed: {
    materialTrackTypeMax() {
      return [this.viewData.materialLinksCover];
    },
  },
};
</script>
<style>
.create_material_form .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.create_material_form .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.create_material_form .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.create_material_form .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.create_material_form .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.effect {
  width: 80px;
  height: 80px;
  display: block;
}

.el-image {
  width: 80px;
  height: 80px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.el-icon-picture-outline {
  font-size: 20px;
}

.pdf-file {
  font-size: 18px;
  padding: 15px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
</style>
<style scoped>
.el-link {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #222;
}

.el-dialog .el-row {
  margin-top: 20px;
}

.materialP1 {
  margin: 8px 0;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  overflow: hidden;
  line-height: 18px;
}

.materialP2 {
  font-size: 13px;
  margin: 0;
  color: rgb(204, 204, 204);
  line-height: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
  /*text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        TABLE-LAYOUT: fixed;
        word-wrap: break-word;
        word-break: break-all;*/
}

.materialP3 {
  margin: 30px 0;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  overflow: hidden;
  line-height: 18px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
